<template>
	<view>
		<u-loading-page loading-text="加载中..." :loading="loading" bg-color="#fff"></u-loading-page>
		<view class="content" v-if="!loading">
			<view class="box m-bottom-15">
				<view>
					<u--text
						:text="language == 'zh' ? detail.shopname : detail.shopname_copy"
						bold
						size="19"
						lines="2"
						color="#000"
						margin="0 0 10px 0"
					/>
					<u--text
						:text="timewhole(detail.reserve_time)"
						size="14"
						color="#989898"
						margin="0 0 10px 0"
					/>
					<view class="flex from" v-if="detail.is_box == '1'">
						<text>{{ $t('subscribe.deskNum') }}</text>
						<text class="mark">{{ detail.num }}号</text>
					</view>
					<view class="flex from" v-if="detail.is_box == '0'">
						<text>包厢</text>
						<text class="mark">
							{{ language == 'zh' ? detail.room_name : detail.room_name_copy }}
						</text>
					</view>
				</view>
				<u--image
					:src="id ? detail.shop_avatar : 'https://dlm.henatop.com/' + detail.shop_avatar"
					width="100%"
					height="250rpx"
					radius="10px"
				></u--image>
			</view>
			<view class="menu m-top-15" v-if="!id">
				<u--text text="点餐明细" size="18" bold margin="0 0 20px 0" color="#141414"></u--text>
				<!-- <u--text :text="$t('subscribe.menuTitle')" size="18" bold margin="0 0 20px 0" color="#141414"></u--text> -->
				<view class="m-bottom-15">
					<view class="menu_item" v-for="(item, index) in detail.orderGoods" :key="index">
						<image :src="item.image" mode="scaleToFill"></image>
						<u--text :text="item.title" color="#231916" size="15" lines="1"></u--text>
						<text class="num">X{{ item.number || 0 }}</text>
						<text class="current">￥{{ item.price }}</text>
					</view>
				</view>
				<view class="menu_label" v-if="type !== 'shangjia'">
					<u--text :text="$t('order.couponText')" color="#333435" size="15"></u--text>
					<u-tag
						:text="language == 'zh' ? detail.coupon_name : detail.coupon_name_copy"
						bgColor="#FFF1F1"
						color="#FF583E"
						borderColor="#FFF1F1"
					></u-tag>
				</view>
				<view class="menu_label">
					<u--text :text="$t('order.reductionText')" color="#333435" size="15"></u--text>
					<u--text
						:text="'-￥' + detail.coupon_price"
						color="#FC4A31"
						size="15"
						align="right"
					></u--text>
				</view>
				<view class="menu_label">
					<u--text :text="$t('order.aggregateText')" color="#333435" size="15"></u--text>
					<u--text
						:text="'￥' + detail.countPrice"
						color="#FC4A31"
						size="15"
						align="right"
					></u--text>
				</view>
			</view>
			<view class="info m-bottom-15">
				<view class="info_item">
					<text class="item_left">{{ $t('subscribe.bookOrder') }}</text>
					<text class="item_right">{{ detail.order_no }}</text>
				</view>
				<view class="info_item">
					<text class="item_left">{{ $t('subscribe.bookPerson') }}</text>
					<text class="item_right">{{ detail.reserve_people }}</text>
				</view>
				<view class="info_item">
					<text class="item_left">{{ $t('subscribe.contactWay') }}</text>
					<text class="item_right">{{ detail.reserve_mobile }}</text>
				</view>
				<view class="info_item">
					<text class="item_left">{{ $t('subscribe.reserveTime') }}</text>
					<text class="item_right">{{ timewhole(detail.reserve_time) }}</text>
				</view>
				<view class="info_item" v-if="detail.is_box == '1'">
					<text class="item_left">{{ $t('subscribe.deskNum') }}</text>
					<text class="item_right">{{ detail.num }}号</text>
				</view>
				<view class="info_item" v-if="detail.is_box == '0'">
					<text class="item_left">包厢</text>
					<text class="item_right">
						{{ language == 'zh' ? detail.room_name : detail.room_name_copy }}
					</text>
				</view>
				<view class="info_item">
					<text class="item_left">{{ $t('subscribe.eatNum') }}</text>
					<text class="item_right">{{ detail.people_num }}</text>
				</view>
			</view>
			<!-- <view class="footer" v-if="detail.state == 2 || detail.state == 1"> -->
			<view class="footer" v-if="!id && detail.reserve_state=='3' && (detail.state===2 || detail.state===1 || detail.state===7)">
				<view class="btn1">
					<u-button
						text="暂存"
						shape="circle"
						:customStyle="btn1Style"
						@click="goStorage"
					></u-button>
					<u-button
						text="去结算"
						shape="circle"
						:customStyle="btnStyle"
						@click="goAccount"
					></u-button>
				</view>
				<!-- <view class="btn2" v-if="detail.state==1">
					<u-button :text="$t('order.settlementBtn')" shape="circle" :customStyle="btnStyle" @click="closeAccount"></u-button>
				</view> -->
				<view class="safe_height_bottom"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			type: '',
			order_id: 0,
			id: '',
			loading: true,
			token: '',
			detail: {},
			btnStyle: {
				background: '#FFC100',
				border: 'none',
				color: '#000',
				height: '90rpx'
			},
			btn1Style: {
				background: 'linear-gradient(270deg, rgba(255, 94, 94, 1) 0%, rgba(255, 141, 26, 1) 100%)',
				border: 'none',
				color: '#fff',
				height: '90rpx'
			}
		};
	},
	onLoad(event) {
		this.type = event.type;
		this.order_id = event.id;
		this.id = event.ids;
	},
	onShow() {
		this.init();
	},
	computed: {
		language() {
			return this._i18n.locale;
		}
	},
	methods: {
		init() {
			if (!this.id) {
				this.$http
					.post('wanlshop/order/userOrderList', {
						order_id: this.order_id,
						status: 1
					})
					.then(res => {
						if (res.code == 1) {
							this.loading = false;
							this.detail = res.data.data;
							this.token = res.data.token;
							console.log(this.detail, 1);
						}
					});
			} else {
				this.$http.post('wanlshop/reserve/reserveDetail', { id: this.id }).then(res => {
					this.loading = false;
					this.detail = res.data.list;
					console.log(this.detail, 2);
				});
			}
		},
		goStorage() {
			uni.navigateBack();
		},
		goAccount() {
			uni.$u.route({
				url: 'pagesA/my/account?status=1',
				params: {
					order_id: this.order_id,
					order_type: 'goods',
					type: 'wechat',
					access_token: this.token,
					method: 'scan',
					code: uni.getStorageSync('code')
				}
			});
		}
	}
};
</script>
<style>
page {
	background: #f5f7f9;
}
</style>
<style lang="scss" scoped>
/deep/.u-radio {
	width: 87% !important;
}

.content {
	padding: 30rpx 30rpx 220rpx 30rpx;

	.radio-item {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;

		image {
			margin-right: 20rpx;
			flex-shrink: 0;
		}
	}

	.pay {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 30rpx;
	}

	.box {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 30rpx;
		display: grid;
		grid-template-columns: auto 160px;
		grid-column-gap: 20rpx;
		align-items: center;

		.image {
			width: 100%;
			height: 250rpx;
			border-radius: 20rpx;
		}

		.from {
			color: #989898;
			font-size: 28rpx;
			margin-top: 40rpx;

			.mark {
				color: #ffac2a;
				margin-left: 40rpx;
			}
		}
	}

	.info {
		padding: 20rpx 40rpx;
		background-color: #fff;
		border-radius: 30rpx;

		.info_item {
			padding: 40rpx 0;
			border-bottom: 2rpx solid #eeeeee;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item_left {
				color: #818181;
				font-size: 30rpx;
			}

			.item_right {
				font-size: 30rpx;
				color: #231916;
			}
		}

		.info_item:last-child {
			border-bottom: none;
		}
	}

	.address {
		display: grid;
		grid-template-columns: 70px auto;
		grid-column-gap: 20rpx;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 30rpx;

		.item_left {
			color: #818181;
			font-size: 30rpx;
		}
	}

	.menu {
		padding: 40rpx;
		background-color: #fff;
		border-radius: 30rpx;
		margin-bottom: 20rpx;
		.menu_item {
			margin-bottom: 40rpx;
			display: grid;
			grid-template-columns: 80rpx auto 40rpx auto;
			grid-column-gap: 20rpx;
			align-items: center;

			image {
				width: 100%;
				height: 80rpx;
				border-radius: 14rpx;
			}

			.num {
				color: #231916;
				font-size: 26rpx;
				text-align: center;
			}

			.original {
				color: #b1b1b1;
				font-size: 26rpx;
				text-decoration: line-through;
			}

			.current {
				color: #fc4a31;
				font-size: 30rpx;
				text-align: right;
			}
		}

		.menu_item:last-child {
			margin-bottom: 0;
		}

		.menu_label {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;
		}

		.menu_label:last-child {
			margin-bottom: 0;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background-color: #fff;
		border-top-left-radius: 35rpx;
		border-top-right-radius: 35rpx;
		box-sizing: border-box;

		.btn1 {
			padding: 20rpx 30rpx;
			display: grid;
			grid-template-columns: 0.8fr 1fr;
			grid-column-gap: 20rpx;
		}

		.btn2 {
			padding: 20rpx 30rpx;
		}
	}
}
</style>
